<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学院网站</title>
</head>
<link href="css/style.css" rel="stylesheet" text="css/text" />
<style>
    body {
        background: linear-gradient(to bottom, rgba(14, 33, 88, 0.99), rgba(39, 112, 219, 0.5));
    }
</style>

<body>
    <div class="main">
        <div id="header">
        </div>
        <div id="content">
            <div class="menu">
                <div class="nav">
                    <ul class="nav-list">
                        <li class="show"> <a href="#">学院主页</a></li>
                        <li class="show"> <a href="#">学院概况</a>
                            <ul class="fade-lists">
                                <li><a href="#">学院简介</a></li>
                                <li><a href="#">历任领导</a></li>
                                <li><a href="#">现任领导</a></li>
                                <li><a href="#">机构设置</a></li>
                                <li><a href="#">开发团队</a></li>
                            </ul>
                        </li>
                        <li class="show"> <a href="#">师资队伍</a>
                            <ul class="fade-lists">
                                <li><a href="#">专任教师</a></li>
                                <li><a href="#">现任教师</a></li>
                            </ul>
                        </li>
                        <li class="show"> <a href="#">招聘就业</a></li>
                        <li class="show"> <a href="#">学科建设</a>
                        </li>
                        <li class="show"> <a href="#">人才培养</a>
                            <ul class="fade-lists">
                                <li><a href="#">本科生培养</a></li>
                                <li><a href="#">研究生培养</a></li>
                            </ul>
                        </li>
                        <li class="show"> <a href="#">科学研究</a>
                            <ul class="fade-lists">
                                <li><a href="#">学术交流</a></li>
                                <li><a href="#">科研成果</a></li>
                            </ul>
                        </li>
                        <li class="show"> <a href="#">学工园地</a>
                            <ul class="fade-lists">
                                <li><a href="#">通知公告</a></li>
                                <li><a href="#">院系新闻</a></li>
                                <li><a href="#">学工动态</a></li>
                                <li><a href="#">学生社团</a></li>
                                <li><a href="#">招生就业</a></li>
                                <li><a href="#">创新创业</a></li>
                                <li><a href="#">学习交流</a></li>
                            </ul>
                        </li>
                        <li class="show"> <a href="#">党群工作</a>
                            <ul class="fade-lists">
                                <li><a href="#">支部生活</a></li>
                                <li><a href="#">党校团校</a></li>
                                <li><a href="#">工会工作</a></li>
                            </ul>

                        </li>
                        <li class="show"> <a href="#">校友天地</a>
                            <ul class="fade-lists">
                                <li><a href="#">校友交流</a></li>
                                <li><a href="#">校友档案</a></li>
                            </ul>
                        </li>
                        <li class="show"> <a href="#">课程建设</a>
                        </li>
                    </ul>
                </div>
                <div class="four">
                    <ul>
                        <li><a href="#"><img src="img/j1.png" alt=""><div class="mana">教务管理</div></a></li>
                        <li><a href="#"><img src="img/j2.png" alt=""><div class="mana">网络课程</div></a></li>
                        <li><a href="#"><img src="img/j3.png" alt=""><div class="mana">问卷调查</div></a></li>
                        <li><a href="#"><img src="img/j4.png" alt=""><div class="mana">文件下载</div></a></li>
                    </ul>
                </div>
            </div>
            <div class="cont">
                <div class="picture">
                    <img src="img/slide_1.jpg">
                    <ul>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                        <li>6</li>
                    </ul>
                    <div class="backg"></div>
                </div>
                <div class="cont-a">
                    <div class="title">
                        <span class="label">公告通知</span>
                        <span class="more">更多</span>
                    </div>
                    <div class="lists">
                        <ul>
                            <li>
                                <a href="#"> 2017年硕士研究生拟录取名单公示</a>
                                <span class="time">2017-04-13</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="cont-b">
                    <div class="title">
                        <span class="label">学工动态</span>
                        <span class="more">更多</span>
                    </div>
                    <div class="lists">
                        <ul>
                            <li>
                                <a href="#"> 2017年硕士研究生拟录取名单公示</a>
                                <span class="time">2017-04-13</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="cont-c">
                    <div class="title">
                        <span class="label">学院新闻</span>
                        <span class="more">更多</span>
                    </div>
                    <div class="lists">
                        <ul>
                            <li>
                                <a href="#"> 2017年硕士研究生拟录取名单公示</a>
                                <span class="time">2017-04-13</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div id="footer">
            <div class="box">
                <div class="til">
                    校企合作
                </div>
                <ul>
                    <li>
                        <a href="#" target="_blank">
                        <img src="img/xq1.jpg">
                    </a>
                    </li>
                    <li>
                        <a href="#" target="_blank">
                        <img src="img/xq2.jpg">
                    </a>
                    </li>
                    <li>
                        <a href="#" target="_blank">
                        <img src="img/xq3.jpg">
                    </a>
                    </li>
                    <li>
                        <a href="#" target="_blank">
                        <img src="img/xq4.jpg">
                    </a>
                    </li>
                    <li>
                        <a href="#" target="_blank">
                        <img src="img/xq5.jpg">
                    </a>
                    </li>
                    <li>
                        <a href="#" target="_blank">
                        <img src="img/xq6.jpg">
                    </a>
                    </li>
                </ul>
                <div class="dec">
                    我院连续多年与国内外多个知名企业合作。
                </div>
            </div>
            <div class="manage">
                <span>© 2016-2017 湖北师范大学计算机科学与技术学院 All rights reserved. Power by
                            <a href="#">Jplus 实验室</a> 、进入
                            <a href="#">后台管理</a>.
                    </span>
            </div>
        </div>
    </div>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script>
        $(function () {
            var lis = $('.menu .nav .nav-list .show')
            lis.mouseover(function () {
                $(this).addClass('active')
                $(this).find("ul").addClass("active")
            })
            lis.mouseleave(function () {
                $(this).removeClass('active')
                $(this).find("ul").removeClass("active")
            })
            var Psrc = $('.picture img')
            var imgLis = $('.picture ul li')
            var index = 1
            auto();
            function auto() {
                play = setInterval(function () {
                    Psrc.attr('src', 'img/slide_' + index + '.jpg')
                    LiChange()
                    if (index > 5)
                        index = 1
                    else {
                        index++
                    }
                }, 2000)
            }
            Psrc.mouseover(function () {
                clearInterval(play)
            })
            Psrc.mouseout(function () {
                auto()
            })
            function LiChange() {
                var liT = imgLis.eq(index - 1)
                liT.addClass('active')
                imgLis.not(liT).removeClass('active')
            }
            imgLis.mouseover(function () {
                clearInterval(play);
                var index = $(this).index() + 1;
                Psrc.attr('src', 'img/slide_' + index + '.jpg')
                $(this).addClass('active')
                imgLis.not(this).removeClass('active')
            })
            imgLis.mouseout(function () {
                auto()
            })
        })

    </script>
</body>

</html>